<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>注册</span>
            </div>
            <el-form
                :model="regForm"
                :rules="rules"
                ref="regForm"
                :label-position="labelPosition"
                label-width="80px"
            >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="regForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="regForm.pwd" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirm">
                    <el-input
                        v-model="regForm.confirm"
                        type="password"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm()"
                        >提交</el-button
                    >
                    <el-button @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { usernameExist } from "../../services/user";
export default {
    data() {
        const validateUsername = async (rule, value, callback) => {
            let data = await usernameExist(value);
            if (data.status == 1) {
                callback();
            } else {
                callback(new Error("重名"));
            }
        };
        const validatePwd = (rule, value, callback) => {
            this.$refs.regForm.validateField("confirm");
            callback();
        };
        const validateConfirm = (rule, value, callback) => {
            if (value == this.regForm.pwd) {
                callback();
            } else {
                callback(new Error("两次密码不一致"));
            }
        };
        return {
            labelPosition: "right",
            regForm: {
                username: "",
                pwd: "",
                confirm: "",
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur",
                    },
                    {
                        pattern: /^\w{6,20}$/,
                        message: "用户名格式不正确",
                        trigger: "blur",
                    },
                    { validator: validateUsername, trigger: "blur" },
                ],
                pwd: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        pattern: /^.{6,}$/,
                        message: "密码格式不正确",
                        trigger: "blur",
                    },
                    { validator: validatePwd, trigger: "blur" },
                ],
                confirm: [
                    {
                        required: true,
                        message: "请输入确认密码",
                        trigger: "blur",
                    },
                    {
                        pattern: /^.{6,}$/,
                        message: "确认密码格式不正确",
                        trigger: "blur",
                    },
                    { validator: validateConfirm, trigger: "blur" },
                ],
            },
        };
    },
    methods: {
        submitForm() {
            this.$refs.regForm.validate((valid) => {
                if (valid) {
                    console.log(this.regForm);
                    this.$alert("OK", "注册成功", {
                        confirmButtonText: "确定"
                    });
                }
            });
        },
    },
};
</script>

<style>
.box-card {
    width: 600px;
    margin: auto;
}
</style>